import React, { memo, useEffect } from "react"
import { shallowEqual, useSelector } from "react-redux"
import { Spin } from 'antd'

import { ListWrapper } from "./style"
import RoomItem from "@/components/room-item"


const MoreList = memo((props) => {
  const { houseList, totalCount, isLoading } = useSelector(state => state.more, shallowEqual)

  useEffect(() => {
    console.log(isLoading)
  },[isLoading])
  return (
    <ListWrapper>
      <div className="title">共{totalCount}所房源</div>
      {
        isLoading ?
        <div className="loading">
          <Spin size="large"/>
        </div> :
        <div className="content">
          {
            houseList.map(item => {
              return <RoomItem itemData={item} key={item.id} itemWidth={"calc(20% - 8px)"}/>
            })
          }
        </div>
      }
    </ListWrapper>
  )
})

MoreList.propTypes = {}

export default MoreList
